<template>
  <div class="repayment-card">
    <Promised :promise="getRepaymentsAsync">
      <template v-slot:pending>
        <Skeleton
          :rows="3"
          :padding="0"
        />
      </template>
      <template>
        <section>
          <div class="repayment-header-container">
            <div class="header">
              <img
                src="~@/assets/images/loan/card/repayment.png"
                alt=""
                width="24"
                height="24"
              >
              Repayment Plan
            </div>

            <div
              v-if="hasRepayment"
              class="text"
            >
              You have to repay the loan  before {{ repayments.duedate | dateFormat('DD/MM/YYYY') }}. Otherwise, there will be a penalty for late payment of bills.
            </div>
          </div>

          <template v-if="hasRepayment">
            <div class="repay-container">
              <div class="amount-container">
                <div class="amount">
                  Remaining Amount：
                </div>
                <div class="money">
                  $ <countTo
                    :start-val="0"
                    :end-val="Number(repayments.amount)"
                    :duration="3000"
                  />
                </div>
              </div>

              <div>
                <a-button
                  type="primary"
                  shape="round"
                  class="loan-button"
                  @click="repay"
                >
                  Repay
                </a-button>
              </div>
            </div>
          </template>
          <template v-else>
            <Empty style="padding: 0;margin-bottom: 10px;">
              No Repayment
            </Empty>
          </template>
        </section>
      </template>
    </Promised>
  </div>
</template>

<script>
import { getCurrentRepayments } from '@/api/risk/user';
import { Empty } from '@/components';
import countTo from 'vue-count-to';

export default {

  components: {
    Empty,
    countTo
  },
  data() {
    return {
      getRepaymentsAsync: null,

      repayments: {}
    };
  },

  computed: {
    hasRepayment() {
      return this.repayments.amount;
    }
  },

  created() {
    this.getRepaymentsAsync = this.getCurrentRepayments();
  },

  methods: {
    getCurrentRepayments() {
      return new Promise((resolve, reject) => {
        getCurrentRepayments()
          .then((data) => {
            this.repayments = data.data;
            resolve(data);
          })
          .catch((error) => {
            reject(error);
          });
      });
    },

    // repay
    repay() {
      this.$emit('repay', this.repayments.task_id);
    }
  }
};
</script>

<style lang="scss" scoped>
.repayment-card {
  padding: 30px;
  height: 213px;
  background: $white;
  box-shadow: 0px 0px 6px 4px rgba(236, 236, 236, 0.5);
  border-radius: $border-radius-lg;
  border: 1px solid $gray-18;
  color: $theme-color;

  & > section {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .repayment-header-container {
    // margin-bottom: $margin-sm;
    .header {
      color: $black-1;
      font-weight: bold;
      font-size: $font-size-lg;
      img {
        margin-right: $margin-base;
      }
      margin-bottom: $margin-base;
    }
    .text {
      font-size: $font-size-xs;
    }
  }

  .repay-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    .amount-container {
      .money {
        font-size: 32px;
        font-weight: bold;
        line-height: 32px;
        margin-top: $margin-base;
      }
    }
    .repay-button {
      font-size: $font-size-lg;
      cursor: pointer;
      width: 144px;
      height: 32px;
      line-height: 32px;
      text-align: center;
      background: $theme-color;
      border-radius: 16px;
      color: $white;
      font-weight: bold;
    }
  }
}

@media (max-width: $screen-md) {
  .repayment-card {
    padding: $padding-sm;
  }
}
</style>
